<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet"
	href="<%=basePath%>/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=basePath%>/css/font-awesome.min.css">
<script type="text/javascript"
	src="<%=basePath%>/js/jquery-1.11.1.min.js">
	
</script>
<script type="text/javascript"
	src="<%=basePath%>/bootstrap-3.3.5-dist/js/bootstrap.min.js">
</script>
<style type="text/css">
body,div,a,ul,li,h3 {
	margin: 0px;
	padding: 0px;
}

.header {
	height: 50px;
	background-color: #438EB9;
}

.header ul li {
	float: right;
	list-style:none;
	mar
}

.main {
	width: 100%;
	height: 500px;
}
.logout{
   width:20%;
   float:right;
}
.logout-button{
	width:40px;
	float:right;
	margin-top:10px;
}
.btn{
	margin-left:-19px;
}
.logout-welcome{
	float:left;
	width:130px;
	text-align: center;
	margin-top:15px;
}

.left_menu {
	margin-left: -15px;
	background-color: #F2F2F2;
	width: 16%;
	float: left;
	border-right:1px solid #ccc;
}

.nav-pills>li{
	 border-bottom: 1px solid #e5e5e5;
}
.nav-pills>li>a{
margin-left:20px;
}
.menu-text{
	margin-left:10px;
}
.content {
	width: 70%;
	height: 400px;
	float: left;
}
.suofang{
	height:20px;
}
</style>
<title>主菜单</title>
<script type="text/javascript">
	$(document).ready(function() {
		var height = $(document).height();
		$(".left_menu").css({
			"height" : height - 50 + "px"
		});
	});

	function link(url) {
		console.info(url);
		$.ajax({
			url : url,
			type : "GET",
			contentType : "application/x-www-formurlencoded;charset=UTF-8",
			cache : false,
			success : function(data) {
				setRightData(data);
			}
		});
	}

	function setRightData(data) {
		$("#content").html(data);
	}
	
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<form action="exit.do">
				<div class="header">
					<div class="logout">
						<div class="logout-welcome">
							${user.username}欢迎登录本系统
						</div>
						<div class="logout-button">
							<button class="btn btn-primary" id="logout">
								<i class="glyphicon glyphicon-off"></i>
							</button>
						</div>
					</div>
				</div>
			</form>
			<form action="main.do" name="mainForm">
				<div class="main">
					<div class="left_menu" id="left_menu">
						<ul class="nav nav-pills nav-stacked">
							<li role="presentation">
								<a href="javascritp:void(0)">
									<i class="glyphicon glyphicon-home"></i>
									<span class="menu-text">首页</span>
								</a>
							</li>
							
							<li role="presentation">
								<a href="views/user.jsp">
									<i class="glyphicon glyphicon-user"></i>
									<span class="menu-text">用户管理</span>
								</a>
							</li>
							<li role="presentation">
								<a href="javascript:void(0)">
									<i class="glyphicon glyphicon-tag"></i>
									<span class="menu-text">角色管理</span>
								</a>
							</li>
							<li role="presentation">
								<a href="javascript:void(0)">
									<i class="glyphicon glyphicon-list"></i>
									<span class="menu-text">菜单管理</span>
								</a>
							</li>
						</ul>
						<div class="suofang" id="suofang">
							<ul class="nav nav-pills nav-stacked">
							<li role="presentation">
								<a href="javascritp:void(0)" id="left">
									<span class="glyphicon glyphicon-menu-left"></span>
								</a>
							</li>
							</ul>
							<script type="text/javascript">
								var flag=true;
								function left(){
									console.info("进入方法");
									if(flag){
										$(".left_menu").css({
											width:"5%"
										});
										$(".menu-text").hide();
										flag=false;
										$(".glyphicon-menu-left").addClass("glyphicon-menu-right");
									}
									else{
										$(".glyphicon-menu-left").removeClass("glyphicon-menu-right");
										$(".left_menu").css({
											width:"16%"
										});
										$(".menu-text").show();
										flag=true;
									}
								}
								$(document).ready(function(){
									$("#left").click(function(){
										left();
									});
								}
								);
							</script>
						</div>
					</div>
					<div class="content" id="content">
						<jsp:include page="/views/showinfo.jsp"></jsp:include>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>